<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>精选--全部</title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/master-AllSelect.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<script src="js/jquery-1.11.3.min.js"></script>
		<style>
			.swiper-pagination li{
				width:0.1rem;height:0.1rem;border-radius: 50%;
			}
			.swiper-pagination .my-bullet-active{
				border-radius: 0;
				background:#fff;
				opacity: 1;
				width:0.3rem;height:0.1rem;border-radius: 0.05rem;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header id="jx-header">
				<img class="title-top" src="img/状态栏_黑.png" alt="">
				<nav>
					<ul class="jx-headerNav">
						<li><a class="active">全部</a><span></span></li>
						<li><a>新品</a><span></span></li>
						<li><a>潮Girl</a><span></span></li>
						<li><a>潮Boy</a><span></span></li>
						<li><a>生活</a><span></span></li>
						<li><a>圈子</a><span></span></li>
					</ul>
					<a href="" class="search">&#xe60e;</a>
				</nav>
			</header>
			<main class="jx-mainAll" style="display: block;">
					<section class="content">
						
						<!-- **********banner************** -->
						<div id="jxAll-banner" class="banner swiper-container">
							<div class="swiper-wrapper">
								<img class="swiper-slide" src="img/jx-All_01.png" alt="">
								<img class="swiper-slide" src="img/jx-New_banner1.png" alt="">
								<img class="swiper-slide" src="img/jx-New_banner2.png" alt="">
							</div>
							<div class="swiper-pagination"></div>
						</div>
						
						
						<!-- ********小公告********** -->
						<div class="news">
							<dl>
								<dt>新人礼</dt>
								<dd>注册有礼，新人大礼包，福利多多</dd>
							</dl>
							<a href="">领取</a>
						</div>
						
						<!-- ********产品展示********** -->
						<div class="product">
							<div class="left">
								<dl>
									<dt>买手优选</dt>
									<dd>潮流元素</dd>
									<img src="img/jx-All_03.png" alt="">
								</dl>
							</div>
							<div class="right">
								<div class="top">
									<dl>
										<dt>折扣专区</dt>
										<dd>优享<em>8</em>折</dd>
										<img src="img/jx-All_05.png" alt="">
									</dl>
								</div>
								<div class="bottom">
									<dl>
										<dt>他们都在买</dt>
										<dd>人气单品</dd>
										<img src="img/jx-All_02.png" alt="">
									</dl>
								</div>
							</div>
						</div>
						<div class="others">
							<img src="img/jx-All_04.png" >
						</div>
				
					</section>
				</main>

			<main class="jx-mainNew">
					<section class="content">
						<div class="banner">
							<img src="img/jx-New_banner1.png" alt="">
						</div>
						<div class="items">
							<dl>
								<dt>
									<img src="img/jx-New_01.png" alt="">
								</dt>
								<dd>￥780</dd>
							</dl>
							<dl>
								<dt>
									<img src="img/jx-New_02.png" alt="">
								</dt>
								<dd>￥780</dd>
							</dl>
							<dl>
								<dt>
									<img src="img/jx-New_03.png" alt="">
								</dt>
								<dd>￥780</dd>
							</dl>
						</div>
						
						<div class="banner">
								<img src="img/jx-New_banner2.png" alt="">
						</div>
						<div class="items">
							<dl>
								<dt>
									<img src="img/jx-New_04.png" alt="">
								</dt>
								<dd>￥780</dd>
							</dl>
							<dl>
								<dt>
									<img src="img/jx-New_05.png" alt="">
								</dt>
								<dd>￥780</dd>
							</dl>
							<dl>
								<dt>
									<img src="img/jx-New_03.png" alt="">
								</dt>
								<dd>￥780</dd>
							</dl>
						</div>
					</section>
				</main>
				
			<main class="jx-mainBoy">
					<section class="content">
						<div class="banner">
							<img src="img/jx-New_banner1.png" alt="">
						</div>
						
						<div class="item">
							<div class="box">
								<img src="img/jx-New_01.png" alt="">
							</div>
							<div class="box">
								<img src="img/jx-New_02.png" alt="">
							</div>
							<div class="box">
								<img src="img/jx-New_01.png" alt="">
							</div>
						</div>
						
						<dl class="welcomeLan">
							<dt>今日主推</dt>
							<dd>Fruit Feast Earrings水果自由耳环</dd>
							<dd>HEFANG jewelry</dd>
						</dl>
						
						<div class="item2">
							<div class="left">
								<img src="img/jx-Girl_04.png" alt="">
							</div>
							<div class="right">
								<div class="top">
									<img src="img/jx-Girl_05.png" alt="">
								</div>
								<div class="bottom">
									<img src="img/jx-Girl_06.png" alt="">
								</div>
							</div>
						</div>
						<div class="item2">
							<div class="left">
								<img src="img/jx-Girl_04.png" alt="">
							</div>
							<div class="right">
								<div class="top">
									<img src="img/jx-Girl_05.png" alt="">
								</div>
								<div class="bottom">
									<img src="img/jx-Girl_06.png" alt="">
								</div>
							</div>
						</div>
					</section>
				</main>
				
			<main class="jx-mainBoy">
					<section class="content">
						<div class="banner">
							<img src="img/jx_Boy_banner1.png" alt="">
						</div>
						
						<div class="item">
							<div class="box">
								<img src="img/jx-Boy_01.png" alt="">
							</div>
							<div class="box">
								<img src="img/jx-Boy_02.png" alt="">
							</div>
							<div class="box">
								<img src="img/jx-Boy_03.png" alt="">
							</div>
						</div>
						
						<dl class="welcomeLan">
							<dt>欢迎你来到</dt>
							<dd>属于你自己的DIENASTIE世界</dd>
							<dd>DIENASTIE</dd>
						</dl>
						
						<div class="item2">
							<div class="left">
								<img src="img/jx-Boy_04.png" alt="">
							</div>
							<div class="right">
								<div class="top">
									<img src="img/jx-Boy_05.png" alt="">
								</div>
								<div class="bottom">
									<img src="img/jx-Boy_06.png" alt="">
								</div>
							</div>
						</div>
						<div class="item2">
							<div class="left">
								<img src="img/jx-Boy_04.png" alt="">
							</div>
							<div class="right">
								<div class="top">
									<img src="img/jx-Boy_05.png" alt="">
								</div>
								<div class="bottom">
									<img src="img/jx-Boy_06.png" alt="">
								</div>
							</div>
						</div>
					</section>
				</main>
				
			<main class="jx-mainLife">
					<section class="content">
						<a class="news item1">
							<dl class="desc">
								<dt>推荐</dt>
								<dd>日本超人气便当盒，尽享更精致的便当时光</dd>
								<dd>TAKENAKA</dd>
							</dl>
						</a>
						<a class="news item2">
							<dl class="desc">
								<dt>推荐</dt>
								<dd>日本超人气便当盒，尽享更精致的便当时光</dd>
								<dd>TAKENAKA</dd>
							</dl>
						</a>
					</section>
				</main>
			<main class="jx-mainCircle">
					<div class="user">
						<dl>
							<dt>
								<img src="img/jx-Circle_01.png" alt="">
							</dt>
							<dd>变身大懒虫</dd>
						</dl>
						<dl>
							<dt>
								<img src="img/jx-Circle_02.png" alt="">
							</dt>
							
							<dd>变身大懒虫</dd>
						</dl>
						<dl>
							<dt>
								<img src="img/jx-Circle_03.png" alt="">
							</dt>
							<dd>变身大懒虫</dd>
						</dl>
						<dl>
							<dt>
								<img src="img/jx-Circle_04.png" alt="">
								<span></span>
							</dt>
							<dd>查看更多</dd>
						</dl>
					</div>
					<section class="content">
						<ul class="newsList">
							<li>
								<div class="newsTitle">
									<span>
										<img src="img/jx-Circle_08.png" alt="">
									</span>
									<span>
										<dl>
											<dt>当代恶臭男青年</dt>
											<dd>8小时前</dd>
											<dd>来自iPhone</dd>
										</dl>
									</span>
									<button class="concernBtn">+ 关注</button>
								</div>
								<p class="userArticle">欧洲接头的时尚……</p>
								<div class="pimgs">
									<span>
										<img src="img/jx-Circle_05.png" alt="">
									</span>
									<span>
										<img src="img/jx-Circle_06.png" alt="">
									</span>
									<span>
										<img src="img/jx-Circle_07.png" alt="">
									</span>
								</div>
								<p class="addres">
									<em>&#xe811;</em>
									<em>Via della Commenda, 12, 20122 Milano. 意大利</em>
								</p>
								<p class="comments">
									<span class="commenters">
										<em>
											<img src="img/jx-Circle_01.png" alt="">
										</em>
										<em>
											<img src="img/jx-Circle_02.png" alt="">
										</em>
										<em>
											<img src="img/jx-Circle_03.png" alt="">
										</em>
									</span>
									<span><em class="like">&#xe6c8;</em><strong>232</strong></span>
									<input class="commentIpt" type="text" placeholder="请输入评论内容" style="display:none;">
									<span class="commentSend">&#xe6d7;</span>
									<span class="enter" style="display:none;">确认</span>
								</p>
							</li>
							<li>
								<div class="newsTitle">
									<span>
										<img src="img/jx-Circle_03.png" alt="">
									</span>
									<span>
										<dl>
											<dt>当代恶臭男青年</dt>
											<dd>8小时前</dd>
											<dd>来自iPhone</dd>
										</dl>
									</span>
									<button class="concernBtn">+关注</button>
								</div>
								<p class="userArticle">欧洲接头的时尚……</p>
								<div class="pimgs">
									<span>
										<img src="img/jx-Circle_05.png" alt="">
									</span>
									<span>
										<img src="img/jx-Circle_06.png" alt="">
									</span>
									<span>
										<img src="img/jx-Circle_07.png" alt="">
									</span>
								</div>
								<p class="addres">
									<em>&#xe811;</em>
									<em>Via della Commenda, 12, 20122 Milano. 意大利</em>
								</p>
								<p class="comments">
									<span class="commenters">
										<em>
											<img src="img/jx-Circle_01.png" alt="">
										</em>
										<em>
											<img src="img/jx-Circle_02.png" alt="">
										</em>
										<em>
											<img src="img/jx-Circle_03.png" alt="">
										</em>
									</span>
									<span><em class="like">&#xe6c8;</em><strong>232</strong></span>
									<input class="commentIpt" type="text" placeholder="请输入评论内容"style="display:none;">
									<span class="commentSend">&#xe6d7;</span>
									<span class="enter" style="display:none;">确认</span>
								</p>
							</li>
						</ul>
					</section>
				</main>
			
			
			
			<footer id="jx-footer">
				<section>
					<dl class="active">
						<dt>&#xf012b;</dt>
						<dd><a href=""></a>精选</dd>
					</dl>
					<dl>
						<dt>&#xe696;</dt>
						<dd><a href=""></a>分类</dd>
					</dl>
					<dl>
						<strong>
							<span>
								<img src="img/logo.png" alt="">
								<em><a href=""></a>时尚头条</em>
							</span>
						</strong>
					</dl>
					<dl>
						<dt>&#xf0179;</dt>
						<dd>购物车</dd>
					</dl>
					
					<dl>
						<dt>&#xe610;</dt>
						<dd>我的</dd>
					</dl>
				</section>
			</footer>
		</div>
		
		
		<script src="js/swiper.js"></script>
		<script src="js/nav.js"></script>
		<script>
			let toLikeBtns = document.querySelectorAll('.like')
			console.log(toLikeBtns)
			let concernBtns = document.querySelectorAll('.concernBtn')
			let commentSendBtns = document.querySelectorAll('.commentSend')
			let enterBtns = document.querySelectorAll('.enter')
			for(let i=0;i<toLikeBtns.length;i++){
				toLikeBtns[i].onclick=function(){
					if(this.style.color == 'red'){
						this.style.color = 'black'
						this.innerHTML = '&#xe6c8;'
						this.nextElementSibling.innerHTML = parseInt(this.nextElementSibling.innerHTML)-1
					}else{
						this.style.color = 'red'
						this.innerHTML = '&#xe85d;'
						this.nextElementSibling.innerHTML = parseInt(this.nextElementSibling.innerHTML)+1
					}
				}
				concernBtns[i].onclick=function(){
					if(this.style.backgroundColor == 'red'){
						this.style.backgroundColor = ''
						this.innerHTML = '+关注'
						this.style.color = '#000'
						this.style.border = '1px solid red';
					}else{
						this.style.backgroundColor = 'red'
						this.innerHTML = '已关注'
						this.style.color = '#fff'
						this.style.border = 0;
					}
				}
				
				commentSendBtns[i].onclick=function(){
					if(this.previousElementSibling.style.display == 'block'){
						this.previousElementSibling.style.display = 'none'
						this.nextElementSibling.style.display = 'none'
					}else{
						this.previousElementSibling.style.display = 'block'
						this.nextElementSibling.style.display = 'block'
					}
					
				}
				
				enterBtns[i].onclick=function(){
					this.previousElementSibling.previousElementSibling.style.display='none'
					this.style.display ='none'
					if(this.previousElementSibling.previousElementSibling.value ==''){
						return;
					}else{
						alert('您已评论成功')
					}
					
				}
			}
		</script>
	</body>
</html>
